<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="法号" prop="legalName">
        <el-input
          v-model="queryParams.legalName"
          placeholder="请输入法号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="姓名" prop="studentName">
        <el-input
          v-model="queryParams.studentName"
          placeholder="请输入姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="学号" prop="studentNumber">
        <el-input
          v-model="queryParams.studentNumber"
          placeholder="请输入学号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="性别" prop="studentSex">
        <el-select
          v-model="queryParams.studentSex"
          placeholder="请选择性别"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_USER_SEX)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="修行类型" prop="monastical">
        <el-select
          v-model="queryParams.monastical"
          placeholder="请选择修行类型"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in this.getDictDatas(DICT_TYPE.STUDENT_MONASTICAL_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="学院" prop="collegesId">
        <college-selector v-model="queryParams.collegesId"></college-selector>
      </el-form-item>

      <el-form-item label="系部" prop="collegesId">
        <departments-selector
          v-model="queryParams.departmentId"
          :college-id="queryParams.collegesId"
        ></departments-selector>
      </el-form-item>

      <el-form-item label="专业" prop="professionsId">
        <professions-selector
          v-model="queryParams.professionsId"
          :department-id="queryParams.departmentId"
        ></professions-selector>
      </el-form-item>
      <el-form-item label="班级" prop="classesId">
        <classes-from-selector
          v-model="queryParams.classesId"
          :profession-id="queryParams.professionsId"
        ></classes-from-selector>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
        :columns="columns"
      ></right-toolbar>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="list">
      <el-table-column
        label="编号"
        align="center"
        prop="serialNumber"
        v-if="columns[0].visible"
        show-overflow-tooltip
      />
      <!-- <el-table-column
        label="机构编号"
        align="center"
        prop="orgId"
        v-if="columns[1].visible"
        show-overflow-tooltip
      /> -->
      <el-table-column
        label="学院"
        align="center"
        prop="college"
        v-if="columns[1].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="系部"
        align="center"
        prop="department"
        v-if="columns[2].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="专业"
        align="center"
        prop="major"
        v-if="columns[3].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="班级"
        align="center"
        prop="classGrade"
        v-if="columns[4].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="学号"
        align="center"
        prop="studentNumber"
        v-if="columns[5].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="法号"
        align="center"
        prop="legalName"
        v-if="columns[6].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="姓名"
        align="center"
        prop="studentName"
        v-if="columns[7].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="性别"
        align="center"
        prop="studentSex"
        v-if="columns[8].visible"
        key="8"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.SYSTEM_USER_SEX"
            :value="scope.row.studentSex"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="年龄"
        align="center"
        prop="studentAge"
        v-if="columns[9].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="出生日期"
        align="center"
        prop="birthday"
        v-if="columns[10].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="证件照片"
        align="center"
        prop="papersImage"
        v-if="columns[11].visible"
        key="11"
      >
        <template slot-scope="scope">
          <el-image
            :src="scope.row.papersImage"
            v-if="scope.row.papersImage"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="修行类型"
        align="center"
        prop="monastical"
        v-if="columns[12].visible"
        key="12"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.STUDENT_MONASTICAL_TYPE"
            :value="scope.row.monastical"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="民族"
        align="center"
        prop="nation"
        v-if="columns[13].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="籍贯"
        align="center"
        prop="natively"
        v-if="columns[14].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="证件类型"
        align="center"
        prop="papersType"
        v-if="columns[15].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="证件号码"
        align="center"
        prop="identityCardNumber"
        v-if="columns[50].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="证件正面照片"
        align="center"
        prop="frontImage"
        v-if="columns[16].visible"
        key="16"
      >
        <template slot-scope="scope">
          <el-image
            :src="scope.row.frontImage"
            v-if="scope.row.frontImage"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="证件反面照片"
        align="center"
        prop="reversesImage"
        v-if="columns[17].visible"
        key="17"
      >
        <template slot-scope="scope">
          <el-image
            :src="scope.row.reversesImage"
            v-if="scope.row.reversesImage"
          ></el-image>
        </template>
      </el-table-column>

      <el-table-column
        label="证件地址"
        align="center"
        prop="papersAddress"
        v-if="columns[18].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="居住地址"
        align="center"
        prop="dwellAddress"
        v-if="columns[19].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="联系电话"
        align="center"
        prop="phone"
        v-if="columns[20].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="联系邮箱"
        align="center"
        prop="email"
        v-if="columns[21].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="微信号"
        align="center"
        prop="wechat"
        v-if="columns[22].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="婚姻状况"
        align="center"
        prop="maritalStatus"
        v-if="columns[23].visible"
        key="23"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.USER_MARITAL_STATUS"
            :value="scope.row.maritalStatus"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="文化程度"
        align="center"
        prop="education"
        v-if="columns[24].visible"
        show-overflow-tooltip
        key="24"
      >
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.SYSTEM_EDUCATION"
            :value="scope.row.education"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="紧急联系人"
        align="center"
        prop="instancyContacts"
        v-if="columns[25].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="联系人关系"
        align="center"
        prop="instancyRelation"
        v-if="columns[26].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="联系人电话"
        align="center"
        prop="instancyContactsPhone"
        v-if="columns[27].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="出家日期"
        align="center"
        prop="monachalTime"
        v-if="columns[28].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="出家寺院"
        align="center"
        prop="monachalTemple"
        v-if="columns[29].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="剃度师尊讳"
        align="center"
        prop="gradientTeachersName"
        v-if="columns[30].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="剃度师电话"
        align="center"
        prop="gradientTeachersPhone"
        v-if="columns[31].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="是否受具足戒"
        align="center"
        prop="footQuit"
        v-if="columns[32].visible"
        key="32"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.INFRA_BOOLEAN_NUMBER"
            :value="scope.row.footQuit"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="受戒日期"
        align="center"
        prop="receiveDisciplineTime"
        v-if="columns[33].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="受戒寺院"
        align="center"
        prop="receiveDisciplineTemple"
        v-if="columns[34].visible"
        show-overflow-tooltip
      />

      <el-table-column
        label="得戒和尚尊讳"
        align="center"
        prop="receiveDisciplineName"
        v-if="columns[35].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="入学时间"
        align="center"
        prop="enrollmentTime"
        width="180px"
        v-if="columns[36].visible"
        key="36"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.enrollmentTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="学费缴纳"
        align="center"
        prop="tuitionFee"
        v-if="columns[37].visible"
        show-overflow-tooltip
        key="37"
      >
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.INFRA_BOOLEAN_STRING"
            :value="scope.row.tuitionFee"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="注册状态"
        align="center"
        prop="registerStatus"
        v-if="columns[38].visible"
        key="38"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.STUDENT_REGISTER_STATUS"
            :value="scope.row.registerStatus"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="在籍状态"
        align="center"
        prop="recordStatus"
        v-if="columns[39].visible"
        key="39"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.STUDENT_RECORD_STATUS"
            :value="scope.row.recordStatus"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="所在年级"
        align="center"
        prop="yearGrade"
        v-if="columns[40].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="毕业结论"
        align="center"
        prop="graduateVerdict"
        v-if="columns[41].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="毕业日期"
        align="center"
        prop="graduateTime"
        v-if="columns[42].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="毕业证编号"
        align="center"
        prop="graduateNumber"
        v-if="columns[43].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="学位证编号"
        align="center"
        prop="degreeNumber"
        v-if="columns[44].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="审核状态"
        align="center"
        prop="checkStatus"
        v-if="columns[45].visible"
        key="45"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.STUDENT_CHECK_STATUS"
            :value="scope.row.checkStatus"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="审核人"
        align="center"
        prop="checkUser"
        v-if="columns[46].visible"
        show-overflow-tooltip
      />
      <el-table-column
        label="审核时间"
        align="center"
        prop="checkTime"
        width="180px"
        v-if="columns[47].visible"
        key="47"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.checkTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="备注"
        align="center"
        prop="checkRemark"
        v-if="columns[48].visible"
        show-overflow-tooltip
      />

      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="180px"
        v-if="columns[49].visible"
        key="49"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button type="primary" @click="handleUpdate(scope.row)"
            >选择</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  createStudentRoll,
  updateStudentRoll,
  deleteStudentRoll,
  getStudentRoll,
  getStudentRollPage,
  exportStudentRollExcel,
} from "@/api/collegebase/studentRoll";
import common from "@/api/collegebase/common";
import CollegeSelector from "@/components/CollegeSelector";
import DepartmentsSelector from "@/components/DepartmentsSelector";
import ProfessionsSelector from "@/components/ProfessionsSelector";
import ClassesFromSelector from "@/components/ClassesFromSelector";
export default {
  name: "StudentRoll",
  components: { ClassesFromSelector, ProfessionsSelector, DepartmentsSelector, CollegeSelector },
  data() {
    return {
      columns: [
        { key: 0, label: `编号`, visible: true },
        { key: 1, label: `学院`, visible: true },
        { key: 2, label: `系部`, visible: false },
        { key: 3, label: `专业`, visible: true },
        { key: 4, label: `班级`, visible: true },
        { key: 5, label: `学号`, visible: true },
        { key: 6, label: `法号`, visible: true },
        { key: 7, label: `姓名`, visible: true },
        { key: 8, label: `性别`, visible: true },
        { key: 9, label: `年龄`, visible: true },
        { key: 10, label: `出生日期`, visible: false },
        { key: 11, label: `证件照片`, visible: false },
        { key: 12, label: `修行类型`, visible: true },
        { key: 13, label: `民族`, visible: false },
        { key: 14, label: `籍贯`, visible: false },
        { key: 15, label: `证件类型`, visible: false },
        { key: 16, label: `证件正面照片`, visible: false },
        { key: 17, label: `证件反面照片`, visible: false },
        { key: 18, label: `证件地址`, visible: false },
        { key: 19, label: `居住地址`, visible: false },
        { key: 20, label: `联系电话`, visible: false },
        { key: 21, label: `联系邮箱`, visible: false },
        { key: 22, label: `微信号`, visible: false },
        { key: 23, label: `婚姻状况`, visible: false },
        { key: 24, label: `文化程度`, visible: false },
        { key: 25, label: `紧急联系人`, visible: false },
        { key: 26, label: `联系人关系`, visible: false },
        { key: 27, label: `联系人电话`, visible: false },
        { key: 28, label: `出家日期`, visible: false },
        { key: 29, label: `出家寺院`, visible: false },
        { key: 30, label: `剃度师尊讳`, visible: false },
        { key: 31, label: `剃度师电话`, visible: false },
        { key: 32, label: `是否受具足戒`, visible: false },
        { key: 33, label: `受戒日期`, visible: false },
        { key: 34, label: `受戒寺院`, visible: false },
        { key: 35, label: `得戒和尚尊讳`, visible: false },
        { key: 36, label: `入学时间`, visible: true },
        { key: 37, label: `学费缴纳`, visible: false },
        { key: 38, label: `注册状态`, visible: false },
        { key: 39, label: `在籍状态`, visible: true },
        { key: 40, label: `所在年级`, visible: false },
        { key: 41, label: `毕业结论`, visible: false },
        { key: 42, label: `毕业日期`, visible: false },
        { key: 43, label: `毕业证编号`, visible: false },
        { key: 44, label: `学位证编号`, visible: false },
        { key: 45, label: `审核状态`, visible: true },
        { key: 46, label: `审核人`, visible: false },
        { key: 47, label: `审核时间`, visible: false },
        { key: 48, label: `备注`, visible: false },
        { key: 49, label: `创建时间`, visible: false },
        { key: 50, label: `证件号码`, visible: false },
        // { key: 51, label: `机构编号`, visible: false },
      ],
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 学员信息列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        studentName: null,
        legalName: null,
        studentSex: null,
        monastical: null,
        studentNumber: null,
        collegesId: null,
        departmentId: null,
        professionsId: null,
        classesId: null,
      },
      //审核弹出层
      examineopen: false,
      //选中参数
      handleSelectValArr: [],
      //学院列表
      //专业列表
    };
  },
  created() {
    this.getList();
    this.getData();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 执行查询
      getStudentRollPage(this.queryParams).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    //获取学院数据
    async getData() {

    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      // 处理查询参数
      let params = { ...this.queryParams };
      params.pageNo = undefined;
      params.pageSize = undefined;
      this.$modal
        .confirm("是否确认导出所有学员信息数据项?")
        .then(() => {
          this.exportLoading = true;
          return exportStudentRollExcel(params);
        })
        .then((response) => {
          this.$download.excel(response, "学员信息.xls");
          this.exportLoading = false;
        })
        .catch(() => { });
    },
    /**选中事件 */
    handleUpdate(val) {
      this.$modal.msgSuccess("选择成功");
      this.$emit("handleStudentData", val);
    },
  },
};
</script>
